<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>逃生路径</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__LAYUI__/css/layui.css" media="all">
  <link rel="stylesheet" href="__STATIC__/plugs/font-awesome/css/font-awesome.min.css" media="all">
  <script type="text/javascript" src="__LAYUI__/layui.js"></script>
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=b32b75e11b6769096d4222213f95de96"></script>
  <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  
 <style>
	.amap-logo,.amap-copyright{
		display: none!important;
	}
  </style>
</head>
<body>
		<div id="map" class="map" style="height:600px" data-url="{:url('index/ajax.map/aerialPhotoLayers')}"></div>
		<div class="layui-btn layui-btn-small add-path" style="z-index:10;position:absolute;bottom:15px;right:20px;background:rgba(0,0,0,0.4);"><i class="fa fa-plus" style="font-size:14px!important"></i></div>
		<div class="add-path-tip" style="font-size:12px;background:rgba(0,0,0,0.4);padding:2px 5px;;border-radius:2px;position:absolute;top:10px;right:20px;color:#fff;display:none;">请开始你的表演</div>
		<input type=hidden id="center" value="119.469092,29.522243"/>
</body>
<script src="__JS__/common/map_tool.js"></script>
<script type="text/javascript">
layui.use(['layer','laytpl','jquery'],function(){
	var layer = layui.layer;
	var laytpl = layui.laytpl;
	var $ = layui.jquery;
	var pathTool; //路径编辑器
	var layers = [new AMap.TileLayer.Satellite()]; //图层
	var center = $('#center').val()?[$('#center').val().split(',')[0],$('#center').val().split(',')[1]]:[119.466116, 29.528251];
	var zoom = $('#center').val()?[17,19]:[13.5,19];
	method = {
			setAerialLayer : function(url,sw_point,ne_point){
				var layer = new AMap.ImageLayer({
					url:url,
					bounds:new AMap.Bounds(sw_point,ne_point),
					zooms:[12,20],
				});
				layers.push(layer);
			}	
	};
	
	
	var map =  new AMap.Map("map", {
        resizeEnable: true,
        expandZoomRange: true,
        // center: [119.466116, 29.528251],
        center: center,
        zooms: zoom,
        //keyboardEnable: false,
        layers: [new AMap.TileLayer.Satellite()],
	});
	
	$.ajax({
		url:$('#map').data('url'),
		success:function(data){
			$.each(data,function(index,item){
				var url = '../../'+item.aerialphoto_url;
				var sw_point = [item.aerialphoto_sw.split(',')[0],item.aerialphoto_sw.split(',')[1]];
				var ne_point = [item.aerialphoto_ne.split(',')[0],item.aerialphoto_ne.split(',')[1]];
				method.setAerialLayer(url,sw_point,ne_point);
			});
			map.setLayers(layers);
			pathTool = new pathEditor({map:map});
		},
	});	
    
    $('.add-path').click(function(){
    	pathTool.startEdit();
    })
	 
});
</script>
</html>